import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input, Select, Space, Button, DatePicker, Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiStockSupplierManageAdd, apiStockSupplierManageEdit, apiStockSupplierManagePage, apiStockSupplierManageDel, apiStockSupplierManageView } from '@/request/storageManager/store.js'
import { phoneReg } from '@/utils/regexp'
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store" 
export default class Provide extends Component {
    constructor() {
        super()
        this.formRef = React.createRef()
        this.queryFormRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: "供应商",
                    dataIndex: "supplierName",
                    key: "supplierName",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "联系人",
                    dataIndex: "contactName",
                    key: "contactName",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "联系方式",
                    dataIndex: "contactMobile",
                    key: "contactMobile",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "地址",
                    dataIndex: "address",
                    key: "address",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['storage:store:provideEdit']} onClick={() => this.edit(render)}>编辑</TheButton>
                            <TheButton haspermi={['storage:store:provideDel']} onClick={() => this.del(render)}>删除</TheButton>
                        </div>
                    }
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10

            },
            total: 0,
            isModalVisible: false,
            loading: false,
            supplierName: '',
            modalTitle: '',
            supplierId: '',
            newColumns: [],
            form_show: true,
            searchOption: [
                { field: 'supplierName', label: '供应商', placeholder: '供应商', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'contactName', label: '联系人', placeholder: '联系人', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'contactMobile', label: '联系方式', placeholder: '联系方式', required: false, rules: [], type: 'InputNumber', defaultValue: '' },
                { field: 'address', label: '地址', placeholder: '地址', required: false, rules: [], type: 'Input', defaultValue: '' },


            ],
            queryForm: {},
        }
    }
    componentDidMount() {

        this.getData()
    }
    getData(values) {

        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        }, async () => {
            let res = await apiStockSupplierManagePage({
                pageNo: this.state.pageData.pageNo,
                pageSize: this.state.pageData.pageSize,
                ...this.state.queryForm
            })
            if (res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    total: res.totalCount
                })
            }
        })


    }

    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };
    async del(row) {
        React.$confirm({
            title: "提示",
            type: 'warning',
            content: "确定是否删除？",
            onOk: async () => {
                let res = await apiStockSupplierManageDel({ id: row.id })
                if (res.code === 0) {
                    this.pageChange(1, 10)
                    React.$message({
                        type: 'success',
                        content: res.codeMessage
                    })
                } else {
                    React.$message({
                        type: 'warning',
                        content: res.codeMessage
                    })
                }

            }
        });

    }
    async edit(row) {
        let res = await apiStockSupplierManageView({ id: row.id })
        if (res.code === 0) {
            this.setState({
                isModalVisible: true,
                supplierId: row.id,
                modalTitle: '编辑'
            }, () => {
                this.formRef.current.setFieldsValue({
                    supplierName: res.data.supplierName,
                    contactName: res.data.contactName,
                    contactMobile: res.data.contactMobile,
                    address: res.data.address,
                })
            })

        }
    }
    reset() {
        this.formRef.current.setFieldsValue({
            supplierName: '',
            contactName: '',
            contactMobile: '',
            address: '',
        })
    }
    async onFinish(values) {
        this.setState({
            loading: true
        })
        if (this.state.supplierId === '') {

            let res = await apiStockSupplierManageAdd({ ...values })
            if (res.code === 0) {
                this.pageChange(1, 10)
                this.reset()
                this.setState({
                    isModalVisible: false,
                    supplierId: '',
                    loading: false

                })
                React.$message({
                    type: 'success',
                    content: res.codeMessage
                })
            } else {
                React.$message({
                    type: 'warning',
                    content: res.codeMessage
                })
            }
        } else {
            let res = await apiStockSupplierManageEdit({ ...values, id: this.state.supplierId })
            if (res.code === 0) {
                this.pageChange(1, 10)
                this.reset()
                this.setState({
                    isModalVisible: false,
                    supplierId: '',
                    loading: false

                })
                React.$message({
                    type: 'success',
                    content: res.codeMessage
                })
            } else {
                React.$message({
                    type: 'warning',
                    content: res.codeMessage
                })
            }
        }

    }
    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }
    render() {
        let { columns, dataSource, modalTitle, pageData, total, isModalVisible, loading, form_show, searchOption, newColumns } = this.state
        return (
            <div className="p-layout-box commodity-examine">
                {/* <Form layout={'inline'} ref={this.searchFormRef} onFinish={this.onFinish} style={{ marginBottom: 12 }}>
                    <Form.Item name={"supplierName"}>
                        <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"供应商名称"} />
                    </Form.Item>

                    <Form.Item>
                        <Space size="small" style={{ marginLeft: 10 }}>
                            <Button type="primary" onClick={() => this.onSearch()}>
                                查询
                            </Button>
                            <Button onClick={() => this.searchReset()}>重置</Button>
                  
                        </Space>
                    </Form.Item>
                </Form>
                <div style={{ marginBottom: 12 }}>
                    <TheButton haspermi={['storage:store:provideAdd']} size="middle" onClick={() => this.setState({
                        isModalVisible: true, modalTitle: '新增'
                    })} type="primary" >新增</TheButton>
                </div> */}
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                    onGetValues={(values) => this.getData(values)}
                    onReset={(values) => this.onReset(values)}
                >
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >
                    <TheButton haspermi={['storage:store:provideAdd']} size="middle" onClick={() => this.setState({
                        isModalVisible: true, modalTitle: '新增'
                    })} type="primary" >新增</TheButton>
                </TheTableExtend>
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={newColumns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                <Modal title={modalTitle} visible={isModalVisible} width="30%"
                    onCancel={() => this.setState({ isModalVisible: false })} footer={null}
                >
                    <Form
                        labelCol={{
                            span: 4
                        }}
                        wrapperCol={{
                            span: 20,
                        }}
                        ref={this.formRef}
                        onFinish={(values) => this.onFinish(values)}
                    >
                        <Form.Item
                            label="供应商"
                            name="supplierName"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入',
                                },
                            ]}
                        >
                            <Input style={{
                            }} placeholder='供应商' maxLength={40} />
                        </Form.Item>
                        <Form.Item
                            label="联系人"
                            name="contactName"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入',
                                },
                            ]}
                        >
                            <Input style={{
                            }} placeholder='联系人' />
                        </Form.Item>
                        <Form.Item
                            label="电话"
                            name="contactMobile"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户手机号！',

                                },
                                {
                                    pattern: phoneReg,
                                    message: '请输入正确得用户手机号！',
                                },
                            ]}
                        >
                            <Input style={{
                            }} placeholder='电话' />
                        </Form.Item>
                        <Form.Item
                            label="地址"
                            name="address"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入',
                                },
                            ]}
                        >
                            <Input style={{
                            }} placeholder='地址' maxLength={40} />
                        </Form.Item>
                        <Form.Item wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}>
                            <Space size="small" style={{ marginLeft: 10 }}>

                                <Button type="default" onClick={() => this.reset()}>
                                    重置
                                </Button>
                                <Button type="primary" htmlType="submit" loading={loading}>
                                    确定
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}
